<template>
	<div class="login">
		<header class="login-header">
			<span class="login-text">阿贝智能</span>
		</header>
		<div class="login-box">
			<header class="user-box">
				<img class="user-image" :src="image||defaultImage" />
			</header>
			<div class="input-box">
				<label class="label" :class="{has: username.trim() != ''}"><Icon type="user"/></label>
				<input class="input" v-model.trim="username" placeholder="请输入您的用户名/手机号码" autofocus list="user" />
			</div>
			<div class="msg">{{msg1}}</div>
			<div class="input-box">
				<label class="label" :class="{has: password.trim() != ''}"><Icon type="pwd"/></label>
				<input class="input" v-model.trim="password" placeholder="请输入您的密码" type="password" />
			</div>
			<div class="msg">{{msg2}}</div>
			<div class="input-box">
				<label class="label" :class="{has: register.trim() != ''}"><Icon type="reg"/></label>
				<input class="input reg" v-model.trim="register" placeholder="请输入验证码" />
				<span class="reg-txt">1234</span>
			</div>
			<div class="msg">{{msg3}}</div>
			<div class="else">
				<span class="remberme">
					<input class="checkbox" type="checkbox" checked />
					<router-link to="">记住密码</router-link>
				</span>
				<router-link class="forget" to="">忘记密码？</router-link>
			</div>
			<input class="button" type="button" value="登 录" @click="handleBtn" />
		</div>
		<div class="copy-right">
			Copyright @ 2021 苏州阿贝智能技术有限公司 All right 
		</div>
		<datalist id="user">
			<option v-for="item in users" :value="item" :key="item">{{item}}</option>
		</datalist>
	</div>
</template>

<script>
import users from '@/mock/users.json'
export default{
	data(){
		return{
			users: [],
			reg: '1234',
			username: '',
			password: '',
			register: '1234',
			msg1: '',
			msg2: '',
			msg3: '',
			timer: undefined,
			image: '',
			defaultImage: 'https://img2.baidu.com/it/u=2435529664,1599218362&fm=26&fmt=auto&gp=0.jpg'
		}
	},
	watch:{
		username(val){
			clearTimeout(this.timer);
			this.timer = setTimeout(()=>{
				let item = users.find((v) => v.id == val);
				this.image = '';
				if(item) this.image = item.image;
			},300)
		}
	},
	methods:{
		handleBtn(){
			if(this.username == ''){
				this.msg1 = '用户名不能为空';
				return;
			}else if(this.password == ''){
				this.msg2 = '密码不能为空';
				return;
			}else if(this.register == ''){
				this.msg3 = '请输入验证码';
				return;
			}
			
			let item = users.find((v) => v.id == this.username);
			if(item){
				if(item.pwd == this.password){
					if(this.register == this.reg){
						this.logined(item);
					}else{
						this.msg3 = '请输入正确的验证码';
						this.msg1 = '';
					}
				}else{
					this.msg2 = '用户名或密码错误';
					this.msg1 = '';
				}
			}else{
				this.msg1 = '该用户不存在！';
				this.msg2 = this.msg3 = '';
			}
		},
		logined(item){
			this.msg1 = this.msg2 = this.msg3 = '';
			sessionStorage.setItem('token', JSON.stringify(item));
			
			// 根据用户信息里的level等级，跳转并附带参数到指定页面
			const {level, factoryId, workshopId, productId} = item;
			let to = {name: 'Home'};
			switch(level){
				case 2:
					to = {name: 'Factory', params:{factoryId}};
					break;
				case 3:
					to = {name: 'Workshop', params:{workshopId}};
					break;
				case 4:
					to = {name: 'Product', params:{productId}};
					break;
			}
			this.$router.push(to);
		}
	},
	mounted(){
		this.password = users[0].pwd;
		this.users = users.map((v) => v.id);
	}
}
</script>

<style lang="less" scoped>
.login{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	margin: 0 auto;
	width: 50%;
	min-width: 250px;
	height: 100vh;
	.login-header{
		margin-top: 8vh;
		text-align: center;
		.login-text{
			color: #fff;
			font-size: 30px;
			text-shadow: 2px 2px 4px #f40;
		}
	}
	.login-box{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 20px 30px;
		width: 350px;
		min-height: 200px;
		box-sizing: border-box;
		border-radius: 4px;
		background-color: rgba(255, 255, 255, .6);
		.user-box{
			margin: 0 auto;
			margin-bottom: 15px;
			width: 120px;
			height: 120px;
			border-radius: 50%;
			border: 2px solid #fff;
			overflow: hidden;
			.user-image{
				width: 100%;
				height: 100%;
			}
		}
		.msg{
			padding-left: 40px;
			line-height: 20px;
			height: 20px;
			font-size: 12px;
			color: #f40;
		}
		.else{
			display: flex;
			justify-content: space-between;
			margin-bottom: 10px;
			line-height: 20px;
			font-size: 13px;
			color: #fff;
			.checkbox{
				margin: 0 auto;
				transform: translateY(2.4px);
				line-height: 20px;
			}
		}
		.button{
			margin-left: 15%;
			width: 70%;
			height: 40px;
			border: 0;
			border-radius: 4px;
			font-size: 18px;
			background-color: #f40;
			color: #fff;
			cursor: pointer;
		}
	}
	.copy-right{
		margin: 0 auto;
		line-height: 10vh;
		white-space: nowrap;
		font-size: 2.2vh;
		color: #000;
		text-shadow: 1px 1px 3px rgba(255,0,0,.4);
	}
}
.input-box{
	display: flex;
	.label{
		flex-shrink: 0;
		width: 30px;
		height: 30px;
		font-size: 20px;
		color: #fff;
		background-color: #aaa;
		&.has{
			background-color: #007AFF;
		}
	}
	.input{
		width: 100%;
		height: 30px;
		text-indent: 10px;
		border: 0;
		box-sizing: border-box;
	}
	.reg-txt{
		margin: 0 5px;
		width: 50px;
		line-height: 30px;
		color: #f00;
		font-size: 18px;
	}
}
</style>
